<template>
    <div id="app">
        <!-- 頂部導航 -->
        <top v-if="!isSearching"></top>

        <!-- 搜索框 -->
        <search v-if="!isSearching" :keywords="filterData.keywords"></search>

        <!-- 選項過濾 -->
        <HouseFilter ref="houseFilter" key="1" v-show="!isSearching"></HouseFilter>
    
        <!-- 詳細搜索面板 -->
        <SearchPanel v-if="isSearching" :keywords="filterData.keywords"></SearchPanel>

        <div v-if="!isSearching">
            <!-- 房子列表 -->
            <transition-group name="fade" tag="div">
            <house v-if="houseLists.length>0" v-for="house in houseLists" :key="house.hid" :house="house"></house>                
            </transition-group>

            <div v-if="!isLoading&&!recHouseLists.length&&!houseLists.length" class="empty text-center">
                抱歉，暫時沒有您搜尋的物件，換個條件試試
            </div>

            <div v-else-if="recHouseLists.length" class="empty-for-rec">
                <p>沒有符合條件的結果，您可以改變條件試試！</p>
                <p>為您推薦您可能感興趣的物件。</p>
            </div>

            <!-- 推荐的房子 -->
            <div v-if="recHouseLists.length>0">
                <div class="guess-like">
                    <span>猜你喜欢</span>
                </div>
                <transition-group name="fade" tag="div">
                <house v-for="house in recHouseLists" :key="house.hid" :house="house"></house>
                </transition-group>
            </div>
                
            <!-- 頁面加載 -->
            <loading v-if="isLoading"></loading>

        </div>

        <!-- 頁腳 -->
        <bottom v-show="!isSearching"></bottom>
    </div>
</template>

<script>
import Top from './components/Header-Top'
import Bottom from './components/Footer-Bottom'
import Search from './components/Search'
import HouseFilter from './components/House-Filter'
import SearchPanel from './components/Search-Panel'
import House from './components/House'
import Loading from './components/Loading'

import setHtmlFontSize from './assets/js/htmlFontSize.js'
import bus from './assets/js/bus.js'

setHtmlFontSize();

export default{
    name: 'app',
    data() {
        return {
            houseLists: [],             // 房子列表
            recHouseLists: [],          // 推薦的房子列表
            canLoadMore: true,          // 可以加載更多
            isLoading: false,           // 正在加載
            isSearching: false,         // 在搜索狀態
            filterData: {
                p: 1,                   // 當前頁
                buildstatus: null,      // 建案狀態
                device: null,           // 設備
                division_id: null,      // 新建案專區ID
                keywords: null,         // 搜索關鍵字
                maxprice: null,         // 最大總價
                minprice: null,         // 最小總價
                o: null,                // 排序
                price: null,            // 總價
                purpose: null,          // 主要用途
                regionid: null,         // 市區ID
                room: null,             // 格局
                searchtype: null,       // 區域和捷運的類型
                sectionid: null,        // 區域縣ID
                shape: null,            // 類型
                subway_id: null,        // 捷運點id
                subway_line: null,      // 捷運線
                tag: null,              // 建案標籤
                unitmaxprice: null,     // 最大單價
                unitminprice: null,     // 最小單價
                unitprice: null,        // 單價
                version: null,          // 版本號
                unitminprice: null,     // 最小單價
                unitmaxprice: null,     // 最大單價
                minprice: null,         // 最小總價
                maxprice: null          // 最大單價
            }
        }
    },
    components: {
        Top,
        Search,
        House,
        HouseFilter,
        SearchPanel,
        Bottom,
        Loading
    },
    created(){

        // 加載首頁數據
        this.loadData()

        // 監聽搜索狀態
        bus.$on( 'searching', () => { this.isSearching = true } )

        // 監聽取消搜索狀態
        bus.$on( 'cancelSearch', () => { this.isSearching = false } )

        // 監聽篩選條件觸發的事件
        bus.$on( 'newhouses', ( data ) => {
            this.houseLists = []
            this.recHouseLists = []
            this.extendFilterData( data )
            this.loadData()
        } )
    },
    mounted(){
        let init = _ => {
            // 下拉加載
            if ( document.body.clientHeight <= window.scrollY + window.innerHeight + 1000 ) {
                // 可以搜索并處於非搜索狀態
                if ( this.canLoadMore && !this.isSearching ) {
                    this.loadData();
                }
            }

            // 篩選條件滾動時取消與固定
            if ( document.body.scrollTop > this.$refs.houseFilter.$el.offsetTop ) {
                if ( this.$refs.houseFilter.$el.classList.contains( 'fixed' ) ) {
                    return
                }
                this.$refs.houseFilter.$el.classList.add( 'fixed' )
            }else{
                this.$refs.houseFilter.$el.classList.remove( 'fixed' )
            }
        }
        window.addEventListener( 'scroll', init, false )
    },
    methods: {
        buildQueryData(){
            var obj = {}
            for( var key in this.filterData ){
                if ( this.filterData[key] ) {
                    obj[key] = this.filterData[key]
                }
            }
            return obj
        },
        loadData(){
            this.canLoadMore = false            
            this.isLoading = true

            this.$http.post( 'api/housing/houseList?device=touch', this.buildQueryData() ).then( response => {

                var recommend = response.body.recommend

                 // 推薦狀態 
                if ( recommend == 1 ) {
                    this.houseLists = []
                    this.recHouseLists = this.recHouseLists.concat( response.body.data )
                }

                // 非推薦狀態
                if ( recommend == 0 ) {
                    this.recHouseLists = []
                    this.houseLists = this.houseLists.concat( response.body.data );
                }

                this.$nextTick(function(){
                    if ( response.body.data.length < 8 ) {
                        this.canLoadMore = false
                    }else{
                        this.canLoadMore = true
                        this.filterData.p++
                    }
                })

                this.isLoading = false

            }, response => {
                console.log( response )
                alert( response.body )
            } )

        },
        extendFilterData( data ){   // 擴展默認的過濾條件
            for( var key in this.filterData ){
                if ( data.hasOwnProperty( key ) ) {
                    if ( key == 'tag' ) {
                        // 清除tag字段中最後一個,
                        this.filterData[key] = data[key].substr( 0, data[key].lastIndexOf( ',' ) )
                    }else{
                        this.filterData[key] = data[key]                        
                    }
                }else{
                    // this.filterData[key] = null
                }
            }
        }
    }
}

</script>

<style scoped>
    body,p{
        margin: 0;
    }
    #app {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
    }
    .guess-like{
        font-size: .3rem;
        font-weight: 700;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: .2rem 0;
    }
    .guess-like span{
        display: inline-block;
        margin-left: .2rem;
        padding-left: .1rem;
        border-left: 5px solid #2478d2;
    }
    .empty{
        height: 5rem;
        line-height: 5rem;
    }
    .empty-for-rec{
        padding-top: .4rem;
        padding-bottom: .4rem;
        padding-left: .2rem;
        line-height: .46rem;
        color: #888;
        font-size: .28rem;
        background: #f5f5f5;
    }
    .fixed{
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
</style>
